<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	// 福袋名称
	const name = ref('')
	// 福袋封面
	const img = ref('')
	// 福袋品类
	const classId = ref('')
	// 福袋总袋数
	const extractCi = ref('')
	// 福袋单价
	const price = ref('')
	// 福袋总成本
	const cost = ref('')
	// 福袋倒计时
	const dayNum = ref('')
	// 福袋总收入
	const income = ref('')
	// 福袋比例
	const profit = ref('')
	// 福袋奖品
	const goodsData = ref([])
	//是否有冲冲
	const isCC = ref(0)

	const range = ref([
		{ value: 0, text: '篮球' },
		{ value: 1, text: '足球' },
		{ value: 2, text: '游泳' },
	])

	// 获取盲盒品类
	const boxCategary = ref([])
	async function getBoxCategary() {
		const res = await http.request({
			url: '/api/shop/getClass',
			method: 'POST',
			data: {},
		})
		console.log(res)
		res.data.forEach((item) => {
			let ob = {
				value: item.id,
				text: item.class_name,
			}
			boxCategary.value.push(ob)
		})
	}

	// 获取奖品赏级
	const rewardLevel = ref([])
	async function getRewardLevel() {
		const res = await http.request({
			url: '/api/shop/getRule',
			method: 'POST',
			data: {
				type: 1,
			},
		})
		console.log(res)
		res.data.forEach((item) => {
			let ob = {
				value: item.id,
				text: item.name,
				obtain: item.obtain,
				scene: item.scene,
			}
			rewardLevel.value.push(ob)
		})
	}

	//七牛token
	const avatarToken = ref('')
	const url = ref()
	async function getPicToken() {
		const res = await http.request({
			url: '/api/config/qiUpload',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			avatarToken.value = res.data.uptoken
			url.value = res.data.domain
		}
	}

	//选取封面
	function chooseCover() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						img.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	//总袋数改变
	function extractCiChange(e) {
		if (Number(e.detail.value)) {
			console.log(e.detail.value)
			income.value = (
				Number(e.detail.value) * Number(price.value)
			).toFixed(2)
			profit.value = (Number(income.value) / Number(cost.value)).toFixed(
				2
			)
		}
	}

	function extractCiBlur() {
		if (Number(extractCi.value) != Math.floor(Number(extractCi.value))) {
			uni.utils.toast('总袋数只可输入整数')
			extractCi.value = Math.floor(Number(extractCi.value))
			income.value = (
				Number(extractCi.value) * Number(price.value)
			).toFixed(2)
			profit.value = (Number(income.value) / Number(cost.value)).toFixed(
				2
			)
		}
	}

	//单价改变
	function priceChange(e) {
		if (Number(e.detail.value)) {
			console.log(e.detail.value)
			if (
				e.detail.value.split('.')[1] &&
				e.detail.value.split('.')[1].length > 2
			) {
				uni.utils.toast('单价最高两位小数')
				return
			}
			income.value = (
				Number(e.detail.value) * Number(extractCi.value)
			).toFixed(2)
			profit.value = (Number(income.value) / Number(cost.value)).toFixed(
				2
			)
		}
	}

	function priceBlur() {
		if (price.value.split('.')[1] && price.value.split('.')[1].length > 2) {
			uni.utils.toast('单价最高两位小数')
			return
		}
		income.value = (
			Number(e.detail.value) * Number(extractCi.value)
		).toFixed(2)
		profit.value = (Number(income.value) / Number(cost.value)).toFixed(2)
	}

	// 倒计时blur
	function dayNumBlur() {
		if (Number(dayNum.value) != Math.floor(Number(dayNum.value))) {
			uni.utils.toast('天数只可输入整数')
			dayNum.value = Math.floor(Number(dayNum.value))
		}
	}

	function addGoods() {
		goodsData.value.push({
			rule_id: '',
			goods_id: '',
			goodsimg: '',
			// 库存
			goodsTotal: '',
			goodsPrice: 0,
			goodsYPrice: 0,
			num: '',
			stage_start: '',
			stage_end: '',
			is_shop: '',
			sort: '0',
			win_type: '0',
			cost: '',
			// 惊喜赏
			is_jx: '',
			jx_rule_id: '',
			no_get: '',
			totalRuleNum: '',
		})
	}

	//商家、平台背包弹框
	// 获取平台背包列表
	const bagpopup = ref()
	const nowIndex = ref()

	//赏级改变
	const chooedLevel = ref()
	function rewardLevelChange(e, index) {
		console.log(e)
		console.log(index)
		rewardLevel.value.forEach((item) => {
			if (item.value == e) {
				console.log(item.obtain)
				// 判断出奖类型
				if (item.obtain == 1) {
					goodsData.value[index].win_type = 0
				} else if (item.obtain == 2) {
					console.log('zp')
					if (item.scene == 0 || item.scene == 1) {
						goodsData.value[index].win_type = 1
						goodsData.value[index].is_jx = 0
					} else if (item.scene == 2) {
						goodsData.value[index].win_type = 2
						goodsData.value[index].is_jx = 0
					} else if (item.scene == 3) {
						goodsData.value[index].win_type = 3
						goodsData.value[index].is_jx = 1
					}
				}
			}
		})
		isCC.value = 0
		for (let i = 0; i < goodsData.value.length; i++) {
			for (let j = 0; j < rewardLevel.value.length; j++) {
				if (goodsData.value[i].rule_id == rewardLevel.value[j].value) {
					if (
						rewardLevel.value[j].obtain == 2 &&
						rewardLevel.value[j].scene == 1
					) {
						isCC.value = 1
					}
				}
			}
		}

		console.log(goodsData.value)

		// 赏别
		chooedLevel.value = []
		goodsData.value.forEach((item) => {
			rewardLevel.value.forEach((level) => {
				if (item.rule_id == level.value && level.obtain == 1) {
					chooedLevel.value.push(level)
				}
			})
		})
	}

	//删除赏级
	function delReward(index) {
		goodsData.value.splice(index, 1)
		//赏别
		chooedLevel.value = []
		goodsData.value.forEach((item) => {
			rewardLevel.value.forEach((level) => {
				if (item.rule_id == level.value && level.obtain == 1) {
					chooedLevel.value.push(level)
				}
			})
		})
		
		isCC.value = 0
		for (let i = 0; i < goodsData.value.length; i++) {
			for (let j = 0; j < rewardLevel.value.length; j++) {
				if (goodsData.value[i].rule_id == rewardLevel.value[j].value) {
					if (
						rewardLevel.value[j].obtain == 2 &&
						rewardLevel.value[j].scene == 1
					) {
						isCC.value = 1
					}
				}
			}
		}
	}

	//选择商品
	const ifPlatform = ref(true)
	async function openBag(index) {
		if (!goodsData.value[index].rule_id) {
			uni.utils.toast('请先选择赏级')
			return
		}
		rewardLevel.value.forEach((item) => {
			console.log(item.value)
			if (item.value == goodsData.value[index].rule_id) {
				console.log(item)
				if (item.obtain == 2) {
					ifPlatform.value = false
				} else {
					ifPlatform.value = true
				}
			}
		})
		nowIndex.value = index
		cardType.value = 0
		bagType.value = 1
		merchantBagList.value = []
		platformBagList.value = []
		await getMerchantBag()
		bagpopup.value.open('center')
	}
	const bagType = ref(1)
	function changeBagType(type) {
		if (type == bagType.value) {
			return
		}
		bagType.value = type
		chooseIndex.value = -1
		chooseRewards.value = { id: -1 }
		if (type == 1) {
			merchantBagList.value = []
			getMerchantBag()
		} else {
			platformBagList.value = []
			getPlatformBag()
		}
	}

	const cardType = ref(0)
	function cardCategary(type) {
		if (type == cardType.value) {
			return
		}
		cardType.value = type
		chooseIndex.value = -1
		chooseRewards.value = { id: -1 }
		if (bagType.value == 1) {
			merchantBagList.value = []
			getMerchantBag()
		} else {
			platformBagList.value = []
			getPlatformBag()
		}
	}
	//获取商家背包列表
	const merchantBagList = ref([])
	async function getMerchantBag() {
		const res = await http.request({
			url: '/api/shop/userBagShop',
			method: 'POST',
			data: {
				page: 1,
				limit: 20,
				status: 1,
				gtype: cardType.value,
			},
		})
		console.log(res)
		merchantBagList.value = [...merchantBagList.value, ...res.data]
		merchantBagList.value.forEach((item) => {
			item.choosed = 0
		})
		merchantBagList.value.forEach((item) => {
			goodsData.value.forEach((goods) => {
				if (item.id == goods.goods_id) {
					item.choosed = 1
				}
			})
		})
	}

	//获取平台背包列表
	const platformBagList = ref([])
	async function getPlatformBag() {
		const res = await http.request({
			url: '/api/shop/getGoods',
			method: 'POST',
			data: {
				page: 1,
				limit: 20,
				gtype: cardType.value,
			},
		})
		console.log(res)
		platformBagList.value = [...platformBagList.value, ...res.data]
	}

	//选择商品背包
	const chooseRewards = ref({ id: -1 })
	function chooseReward(item) {
		if (item.choosed == 1) {
			uni.utils.toast('奖品已被选择')
			return
		}
		if (item.leftover <= 0) {
			uni.utils.toast('奖品数量不足')
			return
		}
		chooseRewards.value = item
	}

	function alreadyChoose(item) {
		if (item.id == chooseRewards.value.id) {
			chooseRewards.value = { id: -1 }
		} else {
			uni.utils.toast('当前奖品已在列表中，请重新选择')
		}
	}

	const chooseIndex = ref(-1)
	function radioChange(e) {
		chooseIndex.value = e.detail.value
		chooseRewards.value = platformBagList.value[chooseIndex.value]
	}

	function cancelChoose() {
		chooseRewards.value = { id: -1 }
		bagpopup.value.close('center')
	}

	//奖品数量
	function numChange(e, index) {
		if (Number(e.detail.value) != Math.floor(Number(e.detail.value))) {
			uni.utils.toast('奖品总数只可输入整数')
			return
		}
		if (
			Number(e.detail.value) > goodsData.value[index].goodsTotal &&
			goodsData.value[index].is_shop == 1
		) {
			goodsData.value[index].num = 0
			uni.utils.toast('奖品总数不可以大于剩余库存')
			return
		}
		goodsData.value[index].cost = (
			Number(e.detail.value) * Number(goodsData.value[index].goodsYPrice)
		).toFixed(2)
		cost.value = 0
		goodsData.value.forEach((item) => {
			cost.value = (Number(cost.value) + Number(item.cost)).toFixed(2)
		})
		profit.value = (Number(income.value) / Number(cost.value)).toFixed(2)
	}

	function numBlur(index) {
		if (
			Number(goodsData.value[index].num) !=
			Math.floor(Number(goodsData.value[index].num))
		) {
			uni.utils.toast('奖品总数只可输入整数')
			goodsData.value[index].num = Math.floor(
				Number(goodsData.value[index].num)
			)
		}
		if (
			Number(goodsData.value[index].num) >
				goodsData.value[index].goodsTotal &&
			goodsData.value[index].is_shop == 1
		) {
			goodsData.value[index].num = 0
			uni.utils.toast('奖品总数不可以大于库存')
			return
		}
		goodsData.value[index].cost = (
			Number(goodsData.value[index].num) *
			Number(goodsData.value[index].goodsYPrice)
		).toFixed(2)
		cost.value = 0
		goodsData.value.forEach((item) => {
			cost.value = (Number(cost.value) + Number(item.cost)).toFixed(2)
		})
		profit.value = (Number(income.value) / Number(cost.value)).toFixed(2)
	}

	//阶段开始
	function startChange(e, index) {
		if (Number(e.detail.value) != Math.floor(Number(e.detail.value))) {
			uni.utils.toast('阶段数只可输入整数')
			return
		}

		if (Number(e.detail.value) <= 0) {
			uni.utils.toast('阶段数需大于0')
			return
		}
	}

	function startBlur(index) {
		if (
			Number(goodsData.value[index].stage_start) !=
			Math.floor(Number(goodsData.value[index].stage_start))
		) {
			uni.utils.toast('阶段数只可输入整数')
			return
		}
		if (Number(goodsData.value[index].stage_start) <= 0) {
			uni.utils.toast('阶段数需大于0')
			return
		}
	}

	//阶段结束
	function endChange(e, index) {
		if (Number(e.detail.value) != Math.floor(Number(e.detail.value))) {
			uni.utils.toast('阶段数只可输入整数')
			return
		}
		if (Number(e.detail.value) <= 0) {
			uni.utils.toast('阶段数需大于0')
			return
		}
		if (Number(e.detail.value) > Number(extractCi.value)) {
			uni.utils.toast('阶段结束不可大于总袋数')
			return
		}
	}

	function endBlur(index) {
		if (
			Number(goodsData.value[index].stage_end) !=
			Math.floor(Number(goodsData.value[index].stage_end))
		) {
			uni.utils.toast('阶段数只可输入整数')
			return
		}
		if (Number(goodsData.value[index].stage_end) <= 0) {
			uni.utils.toast('阶段数需大于0')
			return
		}
		if (
			Number(goodsData.value[index].stage_end) > Number(extractCi.value)
		) {
			uni.utils.toast('阶段结束不可大于总袋数')
			return
		}
	}

	//赏别变化
	function levelChange(e, index) {
		goodsData.value[index].totalRuleNum = 0
		goodsData.value.forEach((item) => {
			if (item.rule_id == e) {
				goodsData.value[index].totalRuleNum =
					goodsData.value[index].totalRuleNum + item.num
			}
		})
	}

	// 发数变化
	function sendChange(e, index) {
		if (Number(e.detail.value) != Math.floor(Number(e.detail.value))) {
			uni.utils.toast('发数只可输入整数')
			return
		}
		if (Number(e.detail.value) <= 0) {
			uni.utils.toast('发数需大于0')
			return
		}
		if (
			Number(e.detail.value) > Number(goodsData.value[index].totalRuleNum)
		) {
			uni.utils.toast('发数不可大于当前赏级的总发数')
			return
		}
	}

	function sendBlur(index) {
		if (
			Number(goodsData.value[index].no_get) !=
			Math.floor(Number(goodsData.value[index].no_get))
		) {
			uni.utils.toast('发数只可输入整数')
			return
		}
		if (Number(goodsData.value[index].no_get) <= 0) {
			uni.utils.toast('发数需大于0')
			return
		}
		if (
			Number(goodsData.value[index].no_get) >
			Number(goodsData.value[index].totalRuleNum)
		) {
			uni.utils.toast('发数不可大于当前赏级的总发数')
			return
		}
	}

	function sureChoose() {
		console.log('qur')
		goodsData.value[nowIndex.value].goods_id = chooseRewards.value.id
		goodsData.value[nowIndex.value].goodsimg = chooseRewards.value.img
		goodsData.value[nowIndex.value].goodsPrice = chooseRewards.value.price
		goodsData.value[nowIndex.value].goodsYPrice =
			chooseRewards.value.y_price
		goodsData.value[nowIndex.value].goodsTotal =
			chooseRewards.value.leftover
		if (bagType.value == 2) {
			goodsData.value[nowIndex.value].is_shop = 0
		} else {
			goodsData.value[nowIndex.value].is_shop = 1
		}
		if (goodsData.value[nowIndex.value].num) {
			goodsData.value[nowIndex.value].cost = (
				Number(goodsData.value[nowIndex.value].num) *
				Number(goodsData.value[nowIndex.value].goodsYPrice)
			).toFixed(2)
			cost.value = 0
			goodsData.value.forEach((item) => {
				cost.value = (Number(cost.value) + Number(item.cost)).toFixed(2)
			})
			profit.value = (Number(income.value) / Number(cost.value)).toFixed(
				2
			)
		}
		console.log(goodsData.value)
		chooseRewards.value = { id: -1 }
		bagpopup.value.close('center')
	}

	// 确认申请
	async function goApply() {
		if (!name.value) {
			uni.utils.toast('请输入天选名称')
			return
		}
		if (!img.value) {
			uni.utils.toast('请选择封面')
			return
		}
		if (!classId.value) {
			uni.utils.toast('请选择福袋品类')
			return
		}
		if (!extractCi.value) {
			uni.utils.toast('请输入总袋数')
			return
		}
		if (!price.value) {
			uni.utils.toast('请输入单价')
			return
		}
		if (!dayNum.value) {
			uni.utils.toast('请输入倒计时')
			return
		}
		if (!goodsData.value) {
			uni.utils.toast('请添加到赏品')
			return
		}
		let all = 0
		for (let i = 0; i < goodsData.value.length; i++) {
			if (!goodsData.value[i].rule_id) {
				uni.utils.toast('请选择赏级')
				return
			}
			if (!goodsData.value[i].goods_id) {
				uni.utils.toast('请选择赏品')
				return
			}
			if (goodsData.value[i].win_type == 2) {
				if (!goodsData.value[i].stage_start) {
					uni.utils.toast('阶段开始不可为空或0')
					return
				}
				if (!goodsData.value[i].stage_end) {
					uni.utils.toast('阶段结束不可为空或0')
					return
				}
				if (
					Number(goodsData.value[i].stage_end) >
					Number(extractCi.value)
				) {
					uni.utils.toast('阶段结束不可大于总袋数')
					return
				}
				if (
					Number(goodsData.value[i].stage_end) <
					Number(goodsData.value[i].stage_start)
				) {
					uni.utils.toast('阶段结束不可小于阶段开始')
					return
				}
			} else if (goodsData.value[i].win_type == 0) {
				all = Number(all) + Number(goodsData.value[i].num)
			} else if (goodsData.value[i].win_type == 3) {
				if (!goodsData.value[i].jx_rule_id) {
					uni.utils.toast('惊喜赏请选择赏别')
					return
				}
				if (!goodsData.value[i].no_get) {
					uni.utils.toast('惊喜赏发数不可为0或空')
					return
				}
				if (
					Number(goodsData.value[i].no_get) >
					Number(goodsData.value[i].totalRuleNum)
				) {
					uni.utils.toast('惊喜赏发数不可大于当前赏别的总发数')
					return
				}
			}
		}
		if (Number(all) != Number(extractCi.value)) {
			uni.utils.toast('购买可得的赏品总数必须等于总袋数')
			return
		}

		const res = await http.request({
			url: '/api/shop/addBoxShop',
			method: 'POST',
			data: {
				name: name.value,
				img: img.value,
				price: price.value,
				extract_ci: extractCi.value,
				class_id: classId.value,
				is_cc: isCC.value,
				day_num: dayNum.value,
				income: income.value,
				cost: cost.value,
				profit: profit.value,
				goods_data: goodsData.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('申请成功，即将返回商家中心')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1, // 默认值是1，表示返回的页面层数
				})
			}, 2000)
		} else {
			uni.utils.toast(res.msg)
		}
	}

	onLoad(() => {
		getBoxCategary()
		getRewardLevel()
		getPicToken()
	})
</script>

<template>
	<view class="addlucky-content">
		<view class="addlucky-info">
			<view class="lucky-name">
				<view class="title" style="margin-right: 20rpx">
					福袋名称
				</view>
				<input
					class=""
					maxlength="9"
					style="
						border-bottom: 2rpx solid #e0e0e0;
						font-size: 28rpx;
						text-align: center;
					"
					v-model="name"
				/>
				<view class="" style="font-size: 22rpx; color: #a6a6a6">
					（名称上限 9 字）
				</view>
			</view>
			<view class="lucky-cover" style="margin-top: 39rpx">
				<view class="title"> 封面 </view>
				<image :src="img" mode="" class="cover-img" v-if="img"></image>
				<view class="cover-img" @click="chooseCover" v-else>
					+添加封面
				</view>
				<view class="" style="width: 144rpx">
					<uni-data-select
						v-model="classId"
						:localdata="boxCategary"
						:clear="false"
						placeholder="品类"
					></uni-data-select>
				</view>
			</view>
			<view class="bottom-item" style="margin-top: 24rpx">
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title"> 总袋数 </view>
					<input
						class="input"
						type="number"
						v-model="extractCi"
						style=""
						@input="extractCiChange"
						@blur="extractCiBlur"
					/>
				</view>
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title">
						单价
						<text style="font-size: 20rpx; color: #a6a6a6">￥</text>
					</view>
					<input
						class="input"
						type="digit"
						v-model="price"
						style=""
						@input="priceChange"
						@blur="priceBlur"
					/>
				</view>
			</view>
			<view class="bottom-item" style="margin-top: 24rpx">
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title"> 总成本 </view>
					<input
						:disabled="true"
						class="input"
						type="number"
						v-model="cost"
						style="border: 2rpx dashed #a6a6a6"
					/>
				</view>
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title"> 倒计时 </view>
					<input
						class="input"
						type="number"
						v-model="dayNum"
						style="width: 111rpx"
						@blur="dayNumBlur"
					/>
					<text
						style="
							margin-left: 10rpx;
							font-size: 20rpx;
							color: #a6a6a6;
						"
						>天</text
					>
				</view>
			</view>
			<view class="bottom-item" style="margin-top: 24rpx">
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title"> 总收入 </view>
					<input
						:disabled="true"
						class="input"
						type="number"
						v-model="income"
						style="border: 2rpx dashed #a6a6a6"
					/>
				</view>
				<view
					class=""
					style="width: 50%; display: flex; align-items: center"
				>
					<view class="title" style="margin-right: 28rpx">
						<view class=""> 比例 </view>
						<view
							class=""
							style="
								position: absolute;
								right: 37%;
								font-size: 20rpx;
								color: #a6a6a6;
							"
						>
							（收入/成本）
						</view>
					</view>
					<input
						:disabled="true"
						class="input"
						type="number"
						v-model="profit"
						style="border: 2rpx dashed #a6a6a6"
					/>
				</view>
			</view>
		</view>
		<view
			class="addlucky-goods"
			v-for="(item, index) in goodsData"
			:key="'goods' + index"
		>
			<view class="" style="width: 144rpx">
				<uni-data-select
					v-model="item.rule_id"
					:localdata="rewardLevel"
					:clear="false"
					placeholder="赏级"
					@change="rewardLevelChange($event, index)"
				></uni-data-select>
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/reward-del.png"
					style="width: 68rpx; height: 34rpx; margin-left: 42rpx"
					mode=""
					@click="delReward(index)"
				></image>
			</view>
			<view class="">
				<view
					class="add-goods"
					@click="openBag(index)"
					v-if="!item.goodsimg"
				>
					+
				</view>
				<image
					class="add-goods"
					:src="item.goodsimg"
					mode=""
					@click="openBag(index)"
					v-else
				></image>
			</view>
			<view class="goods-info">
				<view
					class=""
					style="display: flex; align-items: center; width: 276rpx"
				>
					<view class="title"> 数量 </view>
					<input
						class="input"
						v-model="item.num"
						type="number"
						@input="numChange($event, index)"
						@blur="numBlur(index)"
					/>
				</view>

				<view
					class=""
					style="display: flex; align-items: center; width: 276rpx"
					v-if="item.win_type == 2"
				>
					<view class="title"> 区间 </view>
					<input
						class="input"
						v-model="item.stage_start"
						style="width: 88rpx"
						type="number"
						@input="startChange($event, index)"
						@blur="startBlur(index)"
					/>
					<view class=""> - </view>
					<input
						class="input"
						v-model="item.stage_end"
						style="width: 88rpx; margin-left: 0"
						type="number"
						@input="endChange($event, index)"
						@blur="endBlur(index)"
					/>
				</view>

				<view
					class=""
					style="display: flex; align-items: center; width: 276rpx"
					v-if="item.win_type == 3"
				>
					<view class="title"> 赏别 </view>
					<uni-data-select
						class="input"
						v-model="item.jx_rule_id"
						:localdata="chooedLevel"
						:clear="false"
						placeholder="赏别"
						@change="levelChange($event, index)"
					></uni-data-select>
				</view>
				<view
					class=""
					style="display: flex; align-items: center; width: 276rpx"
					v-if="item.win_type == 3"
				>
					<view class="title"> 发数 </view>
					<input
						class="input"
						v-model="item.no_get"
						type="number"
						@input="sendChange($event, index)"
						@blur="sendBlur(index)"
					/>
				</view>

				<view
					class=""
					style="display: flex; align-items: center; width: 276rpx"
				>
					<view class="title"> 成本 </view>
					<input
						class="input"
						:disabled="true"
						type="number"
						v-model="item.cost"
						style="border: 2rpx dashed #a6a6a6"
					/>
				</view>
			</view>
		</view>
		<view class="add-item" @click="addGoods"> </view>

		<view class="apply-button">
			<image
				@click="goApply"
				src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/apply.png"
				style="width: 638rpx; height: 92rpx"
				mode=""
			></image>
		</view>
		<!-- 背包弹出层 -->
		<uni-popup ref="bagpopup" type="center">
			<view class="bagpopup-content">
				<view class="bagpopup-goods">
					<view class="category-type">
						<view class="bagpopup-type">
							<view
								class="type-button"
								:class="{ 'type-button-active': bagType == 1 }"
								style="margin-right: 43rpx"
								@click="changeBagType(1)"
							>
								商家背包
							</view>
							<view
								class="type-button"
								:class="{ 'type-button-active': bagType == 2 }"
								@click="changeBagType(2)"
								v-if="ifPlatform"
							>
								平台选品
							</view>
						</view>
						<scroll-view
							class="bag-categary-scroll"
							scroll-x="true"
							style="height: 78rpx"
						>
							<view class="bag-categary">
								<view
									class="categary-item"
									:class="{
										'categary-item-active': cardType == 0,
									}"
									@click="cardCategary(0)"
								>
									全部
								</view>
								<view
									class="categary-item"
									:class="{
										'categary-item-active': cardType == 1,
									}"
									@click="cardCategary(1)"
								>
									评级卡
								</view>
								<view
									class="categary-item"
									:class="{
										'categary-item-active': cardType == 2,
									}"
									@click="cardCategary(2)"
								>
									裸卡
								</view>
								<view
									class="categary-item"
									:class="{
										'categary-item-active': cardType == 3,
									}"
									@click="cardCategary(3)"
								>
									原盒
								</view>
								<view
									class="categary-item"
									:class="{
										'categary-item-active': cardType == 4,
									}"
									@click="cardCategary(4)"
								>
									其它
								</view>
							</view>
						</scroll-view>
					</view>
					<scroll-view
						class="bag-goods-scroll"
						scroll-y="true"
						style="height: 58vh"
					>
						<view class="bag-goods" v-if="bagType == 1">
							<view
								class="bag-goods-item"
								style="overflow: hidden"
								v-for="item in merchantBagList"
								:key="'merchant' + item.id"
							>
								<image
									:src="item.img"
									mode=""
									style="width: 100%; height: 100%"
									:class="{
										'set-gray':
											item.choosed == 1 ||
											item.id == chooseRewards.id,
									}"
									@click="chooseReward(item)"
								></image>
								<view class="bag-goods-item-num">
									{{ item.leftover }}
								</view>
								<view
									class=""
									style="
										display: flex;
										align-items: center;
										justify-content: center;
										width: 100%;
										height: 100%;
										position: absolute;
										top: 0;
										bottom: 0;
									"
									@click="alreadyChoose(item)"
									v-if="
										item.choosed == 1 ||
										chooseRewards.id == item.id
									"
								>
									<image
										src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/choose.png"
										style="width: 76rpx; height: 76rpx"
										mode=""
									></image>
								</view>
							</view>
						</view>
						<view class="platform-bag" v-else>
							<radio-group @change="radioChange">
								<view
									class="platform-bag-item"
									v-for="(item, index) in platformBagList"
									:key="'goods2' + item.id"
								>
									<view
										class=""
										style="
											display: flex;
											align-items: center;
										"
									>
										<view
											class="platform-bag-item-img"
											style="overflow: hidden"
										>
											<image
												:src="item.img"
												style="
													width: 100%;
													height: 100%;
												"
												mode=""
											></image>
										</view>
										<view class="platform-bag-item-info">
											<view
												class=""
												style="font-size: 30rpx"
											>
												{{ item.goods_name }}
											</view>
											<view class="info-item">
												<view
													class=""
													style="width: 122rpx"
												>
													成本价
												</view>
												<view class="item-price">
													{{ item.y_price }}
												</view>
											</view>
											<view class="info-item">
												<view
													class=""
													style="width: 122rpx"
												>
													售价
												</view>
												<view class="item-price">
													{{ item.price }}
												</view>
											</view>
										</view>
									</view>
									<radio
										:value="index"
										color="#B691FF"
										:checked="index == chooseIndex"
									/>
								</view>
							</radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="bagpopup-button">
					<view class="button" @click="cancelChoose"> </view>
					<view class="button" @click="sureChoose"> </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.set-gray {
		filter: grayscale(100%) !important;
	}
	.addlucky-content {
		padding: 14rpx;
		padding-bottom: 158rpx;
		.title {
			font-size: 28rpx;
		}
		.lucky-input {
			background-color: rgba(233, 234, 242, 0.53);
		}
		::v-deep .uni-select {
			border: none;
		}
		.addlucky-info {
			height: 600rpx;
			padding: 25rpx 23rpx 0 30rpx;
			margin-bottom: 15rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			background-color: #fff;
			.lucky-name {
				display: flex;
				align-items: center;
			}
			.lucky-cover {
				display: flex;
				justify-content: space-between;
				.cover-img {
					width: 383rpx;
					height: 200rpx;
					border-radius: 14rpx;
					background-color: #f3f4f8;
					text-align: center;
					line-height: 200rpx;
					font-size: 28rpx;
					color: #a6a6a6;
				}
			}
			.bottom-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.input {
					width: 153rpx;
					height: 62rpx;
					box-sizing: border-box;
					margin-left: 32rpx;
					border-radius: 14rpx;
					background-color: #e9eaf2;
					font-size: 28rpx;
					text-align: center;
					color: #af8ef5;
				}
			}
		}

		.addlucky-goods {
			display: flex;
			align-items: center;
			width: 100%;
			height: 246rpx;
			margin-bottom: 15rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 14rpx;
			.add-goods {
				width: 148rpx;
				height: 202rpx;
				margin: 0 82rpx 0 55rpx;
				background-color: #e9eaf2;
				border-radius: 10rpx;
				text-align: center;
				line-height: 202rpx;
				color: #a6a6a6;
			}
			.goods-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				height: 218rpx;

				.input {
					width: 153rpx;
					height: 50rpx;
					box-sizing: border-box;
					margin-left: 32rpx;
					border-radius: 14rpx;
					background-color: #e9eaf2;
					font-size: 28rpx;
					text-align: center;
					color: #af8ef5;
				}
				::v-deep .uni-select {
					height: 50rpx !important;
				}
				::v-deep .uni-select__input-box {
					height: 50rpx !important;
				}
				::v-deep .uni-select__input-text {
					color: #af8ef5 !important;
				}
			}
		}
		.add-item {
			height: 248rpx;
			background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/add-item.png)
				no-repeat;
			background-size: 100% 100%;
		}
		//背包
		.bagpopup-content {
			position: relative;
			width: 713rpx;
			height: 1183rpx;
			box-sizing: border-box;
			border-radius: 26rpx;
			background-color: rgba(235, 229, 248, 1);
			border: 3rpx solid rgba(116, 11, 0, 1);
			.bagpopup-goods {
				// width: 667rpx;
				height: 1055rpx;
				margin: 0 auto;
				margin-top: 23rpx;
				// padding: 15rpx;
				box-sizing: border-box;
				border-radius: 14rpx;
				// background-color: #fff;
				.category-type {
					width: 682rpx;
					height: 181rpx;
					padding: 19rpx 26rpx;
					margin: 0 auto;
					margin-bottom: 13rpx;
					box-sizing: border-box;
					border-radius: 14rpx;
					background-color: #fff;
				}
				.bagpopup-type {
					display: flex;
					align-items: center;
					width: 100%;
					margin-bottom: 29rpx;
					.type-button {
						width: 147rpx;
						height: 49rpx;
						border: 2rpx solid rgba(166, 166, 166, 1);
						box-sizing: border-box;
						border-radius: 14rpx;
						font-size: 28rpx;
						color: rgba(166, 166, 166, 1);
						text-align: center;
						line-height: 49rpx;
					}
					.type-button-active {
						border: 2rpx solid rgba(145, 101, 240, 1);
						color: rgba(121, 72, 234, 1);
					}
				}
				.bag-categary-scroll {
					.bag-categary {
						display: flex;
						align-items: center;
						.categary-item {
							flex-shrink: 0;
							// width: 108rpx;
							height: 54rpx;
							padding: 0 30rpx;
							margin-right: 16rpx;
							border-radius: 14rpx;
							background-color: rgba(245, 245, 245, 1);
							font-size: 24rpx;
							text-align: center;
							line-height: 54rpx;
							color: rgba(166, 166, 166, 1);
						}
						.categary-item-active {
							background-color: rgb(235, 229, 248);
							color: rgb(121, 72, 234);
						}
					}
				}
				.bag-goods-scroll {
					.bag-goods {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-evenly;
						width: 682rpx;
						padding: 10rpx;
						margin: 0 auto;
						box-sizing: border-box;
						border-radius: 14rpx;
						background-color: #fff;
						.bag-goods-item {
							flex-shrink: 0;
							position: relative;
							width: 151rpx;
							height: 202rpx;
							margin-right: 11rpx;
							margin-bottom: 32rpx;
							border-radius: 10rpx;
							background-color: #fff;
							&:nth-child(4n) {
								margin-right: 0;
							}
							.bag-goods-item-num {
								position: absolute;
								bottom: 0;
								right: 0;
								height: 37rpx;
								padding: 0 10rpx;
								box-sizing: border-box;
								border-radius: 10rpx;
								background-color: #fff;
								border: 1rpx solid rgb(145, 114, 212);
								text-align: center;
								line-height: 37rpx;
								font-size: 18rpx;
								color: rgb(145, 101, 240);
							}
						}
					}
					.platform-bag {
						width: 682rpx;
						margin: 0 auto;
						background-color: rgba(235, 229, 248, 1);
						.platform-bag-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 270rpx;
							padding: 0 22rpx;
							margin-bottom: 13rpx;
							box-sizing: border-box;
							border-radius: 14rpx;
							background-color: #fff;
							.platform-bag-item-img {
								width: 170rpx;
								height: 236rpx;
								border-radius: 10rpx;
								margin-right: 24rpx;
								background-color: #fff;
							}
							.platform-bag-item-info {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								height: 236rpx;
								padding-bottom: 32rpx;
								box-sizing: border-box;
								.info-item {
									display: flex;
									align-items: center;
									font-size: 26rpx;
									.item-price {
										height: 36rpx;
										padding: 0 18rpx;
										background-color: rgb(
											233,
											234,
											242,
											0.5
										);
										border: 2rpx dashed #a6a6a6;
										border-radius: 14rpx;
										box-sizing: border-box;
										font-size: 24rpx;
										color: #808080;
									}
								}
							}
						}
					}
				}
			}
			.bagpopup-button {
				position: absolute;
				bottom: 11rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 80rpx;
				box-sizing: border-box;
				.button {
					width: 238rpx;
					height: 84rpx;
					background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/bag-sure.png)
						no-repeat;
					background-size: 100% 100%;
					&:first-child {
						background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/bag-cancle.png)
							no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
		.apply-button {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
	}
</style>
